<template>
	<div class="pay-wrap">
		<div class="service-box">
			<img class="img" src="">
			<div class="content">
				<div class="title ellipsis2" style="-webkit-box-orient: vertical;">爱可视车载多功能手机支多功能手机支架BW89453A爱可视车载多功能手机支多功能手机支架BW89453A</div>
				<div class="price"><span><em class="unit">¥</em><em class="text">20</em></span></div>
				<div class="num"><span><em class="unit">×</em><em class="text">1</em></span></div>
			</div>
		</div>
		<div class="select-list">
			<div class="item">
				<div class="item-left">收券手机号</div>
				<div class="item-right">18733388492</div>
			</div>
			<div class="item item-min">
				<div class="item-left">购买成功后将发送抵扣券到此车享账号</div>
			</div>
		</div>
		<div class="select-list">
			<div class="item">
				<div class="item-left">付款方式</div>
				<div class="item-right">在线支付</div>
			</div>
			<div class="item">
				<div class="item-left">配送</div>
				<div class="item-right">自提（电子兑换券）</div>
			</div>
		</div>
		<div class="pay-box">
			<div class="price-box">
				<span class="desc">总计：</span><span class="price"><em class="unit">¥</em><em class="text">15.00</em></span>
			</div>
			<div class="pay-btn" ca="拼团_确认订单$立即支付" @click="payAction">
				立即支付
			</div>
		</div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import Url from 'url';
	import QueryString from 'query-string';
	import {Toast, MessageBox} from 'mint-ui';
	//import shareImg from "../../../static/image/shareimg.png";
	export default{
		data (){
			return {
				activityId: ''
			};
		},
		components: {
			
		},
		created (){
			var _this = this;
			//初始化
			_this.init();
		},
		mounted (){
			var _this = this;
			//打点
    		_this.$nextTick(function () {
    			common.ANA_AnalyticsScan();
    		});
		},
		methods: {
			init: function () {
				var _this = this;
				var hrefUrl = window.location.href;
		    	var urlObj = Url.parse(hrefUrl);
		    	var queryObj = QueryString.parse(urlObj.query);
		    	_this.activityId = queryObj.activityId;
			},
			payAction: function() {
				var _this = this;
				var payUrl= common.isdev() + '/prmtcenter/seckill/confirm.json';
				var payParamsData={
					activityId: _this.activityId
				};
				_this.$http.post(payUrl, payParamsData).then(function (res) {
					var data = res.data;
					if(data.code=='2002'){
						var finishUrl=common.isdev() + '/prmtcenter/seckill/isOrderFinish.json';
						var finishParamsData={
								activityId: _this.activityId
						};
						_this.$http.post(finishUrl,finishData).then(function (res) {
							
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
		height: 100%;
		background: #f6f7f7;
	}
	.pay-wrap {
		.service-box {
			position: relative;
			padding: 1.5rem;
			background: #ffffff;
			.img {
				position: absolute;
				top: 1.5rem;
				left: 1.5rem;
				display: block;
				width: 12rem;
				height: 8rem;
				background: #f0f5fb;
			}
			.content {
				position: relative;
				height: 8rem;
				margin-left: 12rem;
				padding-left: 0.8rem;
				.title {
					height: 3.6rem;
					font-size: 1.5rem;
					line-height: 1.85rem;
					color:#000000;
				}
				.price {
					position: absolute;
					left: 0.8rem;
					bottom: 0;
					font-size: 1.5rem;
					color:#000000;
				}
				.num {
					position: absolute;
					right: 0;
					bottom: 0;
					font-size: 1.3rem;
					color:#999999;
				}
			}
		}
		.select-list {
			margin-top: 0.8rem;
			padding-left: 1.5rem;
			background: #ffffff;
			.item {
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1px solid #e7e7e7;
				padding:1.5rem 1.5rem 1.5rem 0;
				font-size: 1.5rem;
				&:nth-of-type(1) {
					border-top: 0;
				}
				.item-left {
					color:#999999;
				}
				.item-right {
					color:#333333;
				}
			}
			.item-min {
				font-size: 1.3rem;
				padding: 1rem 1.5rem 1rem 0;
			}
		}
		.pay-box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			background: #ffffff;
			box-shadow:0 0 20px rgba(204, 204, 204, .7);  
			.price-box {
				height: 6rem;
				line-height: 6rem;
				padding-left: 1.4rem;
				padding-right: 19rem;
				font-size: 1.7rem;
				.desc {
					color:#000000;
				}
				.price {
					color:#ff6600;
				}
			}
			.pay-btn {
				position: absolute;
				top: 0.8rem;
				right: 1rem;
				width: 17rem;
				height: 4.4rem;
				line-height: 4.4rem;
				border-radius: 0.4rem;
				background:#ff6600;
				text-align: center;
				font-size: 1.7rem;
				color: #ffffff;
			}
		}
	}
	.ellipsis {
		white-space: nowrap;  
        overflow: hidden;  
        text-overflow: ellipsis;  
	}
	.ellipsis2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>
